import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import $ from "jquery";
import global from "../module/Global.js"
import "../css/Header.css"
import "../css/font-awesome/css/font-awesome.css"

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showBottomPanel: false
        }
    }
// 展示底部功能区面板
    handleShowBottomPanel() {
        console.log('test');
        let gManager = this.props.gManager;
        this.state.showBottomPanel = !this.state.showBottomPanel;
        if (gManager == null || gManager == '') {
            console.log('g is null');
            return;
        }

        if (this.state.showBottomPanel) {
            let param = {
                filePath: "E:\\SVN\\Gg3d_v2\\code\\static\\bottom.html",
                offsetY: $(window).height() - 250,
                sizeX: $(window).width(),
                sizeY: 200,
                winId: 0
            };
            gManager.showPanel(param)
        } else {
            gManager.g.htmlWindow.hideWindow(0)
        }
    }

    // 展示右侧参数面板
    handleSetParam() {
        let param = {
            filePath: "E:\\SVN\\Gg3d_v2\\code\\static\\setParams.html",
            offsetX:  $(window).width()-400,
            offsetY:  2,
            sizeX: 400,
            sizeY: 500,
            winId: 1
        };
        this.props.gManager.showPanel(param)
    }


    componentDidMount() {
    }

    render() {
        return (
            <div>
                <div className="c-layout-header">
                    <div className="c-header">
                    <div class="c-logo">
                        <img src={require('../img/logo.png')}/>
                        </div>
                           <div className="c-btns" style={{float:'left',marginLeft:400}}>
                    	 	<div id="nav">
							    <ul>
							        <li class="fa fa-arrow-down fa-2x" onClick={this.handleShowBottomPanel.bind(this)}><a href="#"></a></li>
							        <li class="fa fa-info-circle fa-2x" onClick={this.handleSetParam.bind(this)}><a href="#"></a></li>
							        <li class="fa fa-eye fa-2x">
                                        <a href="#"></a>
							            <ul  ref='u-ul'>
							                <li><a href="#" >1</a></li>
							                <li><a href="#">2</a></li>
							            </ul>
							        </li>
							        <li class="fa  fa-area-chart fa-2x" onMouseOver={this.displaySubMenu} onMouseOut={this.hideSubMenu}><a href="#"></a>
							            <ul>
							                <li><a href="#">1</a></li>
							                <li><a href="#">2</a></li>
							                <li><a href="#">3</a></li>
							            </ul>
							        </li>
							        <li class="fa fa-home fa-2x"><a href="#"></a></li>
							        <li class="fa fa-arrow-down fa-2x"><a href="#"></a></li>
							    </ul>
							</div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Header







